import { Outlet } from "react-router";
import MenuBar from "../../components/cutomMenu";
import styled from "@emotion/styled";
import { FloatButton, Tooltip, Watermark } from "antd";
import TopBar from "../../components/top-bar";
import { CustomerServiceOutlined } from "@ant-design/icons";
import SvgIcon from "../../components/svgIcon";
import { naviState } from "../../stores/navi";
import { useRecoilState } from "recoil";
import CustomTabBar from "../../components/custom-tab-bar";
import { memo } from "react";
import { userState } from "../../stores/user";
const IndexPage = () => {
  const [navi] = useRecoilState(naviState);
  const [sys] = useRecoilState(userState);
  return (
    <IndexPageContainer>
      <div
        className={"menu"}
        style={{ width: navi.defaultOpenStatus ? "80px" : "256px" }}
      >
        <MenuBar />
      </div>
      <div className="index-right">
        <div className={"top_bar"}>
          <TopBar />
        </div>
        <div className={"tabs"}>
          <CustomTabBar />
        </div>
        <Watermark
          height={50}
          width={230}
          font={{ fontSize: 20, fontWeight: 700, color: 'rgba(0,0,0,0.1)' }}
          gap={[100, 100]}
          // image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
          content={sys.userInfo.sysName || ""}
        >
          <div id="root-view" className={"center"}>
            <Outlet />
            <div className={"footer"}></div>
          </div>
          <div>
            <FloatButton.Group
              trigger="hover"
              type="primary"
              style={{ right: 24 }}
              icon={<CustomerServiceOutlined />}
            >
              <Tooltip placement="left" title={"说明文档"}>
                <FloatButton
                  icon={<SvgIcon name="file-magnifying-glass" size={22} />}
                />
              </Tooltip>
              <Tooltip placement="left" title={"在线答疑"}>
                <FloatButton icon={<SvgIcon name="comments" size={22} />} />
              </Tooltip>
            </FloatButton.Group>
          </div>
        </Watermark>
      </div>
    </IndexPageContainer>
  );
};

export default memo(IndexPage);

const IndexPageContainer = styled.div`
  background-color: var(${`--primary-bg-color`});
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  .index-right {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-areas:
      "top_bar"
      "tabs"
      "center";
    grid-template-rows: 4rem 3rem minmax(840px, 1fr);
    .top_bar {
      grid-area: top_bar;
    }

    .tabs {
      grid-area: tabs;
      margin: 0 1.5rem;
    }

    .center {
      // background-color: yellow;
      grid-area: center;
      margin: 0 1.5rem;
      height: 100%;
      overflow:auto;
    }
  }
  .menu {
    background-color: var(${`--menu-primary-bg-color`});
    grid-area: menu;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  }
`;
